<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>帮买快递回收</el-breadcrumb-item>
			<el-breadcrumb-item>门店管理</el-breadcrumb-item>
		</el-breadcrumb>




		<el-row style="margin-top: 20px;">
			<el-form :inline="true">


				<el-form-item label="门店名称">
					<el-input clearable @clear="querymendianList" v-model="queryInfo.keyword"
						placeholder="请输入门店名称"></el-input>
				</el-form-item>

				<el-form-item label="门店手机号码">
					<el-input clearable @clear="querymendianList" v-model="queryInfo.phone"
						placeholder="请输入门店手机号码"></el-input>
				</el-form-item>


				<el-form-item label="提交时间">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="dataValue" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="querymendianList">搜索</el-button>

				</el-form-item>


				<div><el-button type="success" @click="addmendian">新增门店</el-button></div>

			</el-form>
		</el-row>




		<!-- 表格区域 -->
		<el-table :data="shopList" boder style="width: 100%">
			<el-table-column prop="shopName" label="门店">
			</el-table-column>
			<el-table-column prop="shopId" label="id">
			</el-table-column>
			<el-table-column prop="shopPhone" label="门店手机号码">
			</el-table-column>
			<el-table-column prop="shopAddress" label="门店地址">
			</el-table-column>

			<el-table-column prop="shopDistrict" label="关联小区">
			</el-table-column>
			<el-table-column prop="shopOrderCount" label="订单总数">
			</el-table-column>
			<el-table-column prop="shopStatus" label="状态">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link type="success" @click="xiugai(scope.row)">编辑小区</el-link>
				</template>
			</el-table-column>
		</el-table>



		<!-- 页码分页 -->
		<!-- current-page要访问的页码，page-sizes每页展示的条数，page-size -->
		<el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
			:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
			:total="total">
		</el-pagination>

		<!-- 新增对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible">
			<el-form >
				<el-form-item label="门店名称" :label-width="formLabelWidth">
					<el-input v-model="shopaddxinxi.shopName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="门店手机号码" :label-width="formLabelWidth">
					<el-input v-model="shopaddxinxi.shopPhone" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="所属地区" :label-width="formLabelWidth">
					<el-cascader v-model="addressarr" :options="cityy"></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" :label-width="formLabelWidth">
					<el-input v-model="shopaddxinxi.shopAddress" placeholder="请输入详细地址" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="门店坐标" :label-width="formLabelWidth">
					<el-button type="success" plain @click="getjingweidu">获取地址</el-button>
				</el-form-item>
				<el-form-item label="营业时间" :label-width="formLabelWidth">
					<el-input v-model="shopaddxinxi.shopPhone" autocomplete="off"></el-input>
					<span v-show="shopaddxinxi.shopLatitude&& shopaddxinxi.shopLongitude">
						{{shopaddxinxi.shopLatitude}},{{shopaddxinxi.shopLongitude}}
					</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="quedinganniu">确认保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import city from '../assets/citydata.js'
	export default {
		// 数据
		data() {
			return {
				queryInfo: {
					pageNum: 1,
					pageSize: 10,
					phone: '',
					keyword: '',
					shopStatus: 1,
					startTime: '',
					endTime: '',
				},
				httpma: '',
				dataValue: '',
				total: 1,
				shopList: [],
				title: '添加',
				dialogFormVisible: false,
				formLabelWidth: '120px',
				shopaddxinxi: {
					shopAddress: "",
					shopCity: "",
					shopDescribe: "",
					shopDistrict: "",
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopPhone: "",
					shopProvince: "",
				},
				addressarr: [],
				cityy: city,

			}
		},




		// 方法
		methods: {

			// 修改门店资料
			xiugai(e) {

				this.dialogFormVisible = true
				this.title = '修改'
				this.shopaddxinxi = e
				this.addressarr = [this.shopaddxinxi.shopProvince, this.shopaddxinxi.shopCity, this.shopaddxinxi
					.shopDistrict
				]
				this.httpma = 'shop/modifyShop'
			},








			// 获得经纬度方法
			getjingweidu() {
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
					params: {
						key: '457886b5972a97e93fb9cdccebfd450f',
						address: this.shopaddxinxi.shopProvince + this.shopaddxinxi.shopCity + this.shopaddxinxi
							.shopDistrict + this.shopaddxinxi.shopAddress

					}
				}).then((resp) => {
					let jingweidu = resp.data.geocodes[0].location
					this.shopaddxinxi.shopLatitude = jingweidu.split(',')[0]
					this.shopaddxinxi.shopLongitude = jingweidu.split(',')[1]

					this.$message.success('成功')
				})
			},










			// 获取添加信息方法
			quedinganniu() {
				this.$http.post(this.httpma, this.shopaddxinxi).
				then((resp) => {
					if (resp.data.status == 200) {
						this.$message.success(resp.data.message)
						this.querymendianList()
						this.shopaddxinxi = {
							shopAddress: "",
							shopCity: "",
							shopDescribe: "",
							shopDistrict: "",
							shopImage: "",
							shopLatitude: "",
							shopLongitude: "",
							shopName: "",
							shopPhone: "",
							shopProvince: "",
						}
						this.dialogFormVisible = false
					} else {
						this.$message.error('操作失败')
					}
				})
			},

			// 新增门店按钮

			addmendian() {
				this.dialogFormVisible = true
				this.title = '添加'
				this.httpma = 'shop/addShop'
			},




			// 每页显示数量发生改变时触发
			handleSizeChange(val) {
				// 更改请求参数中的pageSize
				this.queryInfo.pageSize = val
				// 设置当改变后默认访问第一页
				this.queryInfo.pageNum = 1
				// 重新查询数据
				this.querymendianList()
			},



			// 页码发生改变时触发
			handleCurrentChange(num) {
				this.queryInfo.pageNum = num
				// 重新查询数据
				this.querymendianList()
			},

			// 查询数据方法
			querymendianList() {
				this.$http.get('shop/querySearchShopList', {
					params: this.queryInfo
				}).then((resp) => {
					if (resp.data.status == 200) {
						this.shopList = resp.data.data.list
						this.total = resp.data.data.total
					} else {
						this.$message.error('数据获取异常')
					}
				})
			}
		},




		//开始的钩子函数 
		mounted() {
			this.querymendianList()
		},




		// 监听器
		watch: {
			dataValue(newValue, oldValue) {
				this.queryInfo.startTime = newValue[0]
				this.queryInfo.endTime = newValue[1]
			},


			// 当身份信息改变时，进行赋值
			addressarr() {
				this.shopaddxinxi.shopProvince = this.addressarr[0]
				this.shopaddxinxi.shopCity = this.addressarr[1]
				this.shopaddxinxi.shopDistrict = this.addressarr[2]
			}

		},




	}
</script>

<style>
</style>